/**
 * @description  权益行业风险分析
 * @author zls
 */
import React, { PureComponent } from 'react';
import { PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip, message } from 'antd';
import { ModalC } from '@/src/comps';
import InputGroup from './compents/inputGroup';
import colors from '@/src/css/colors';
const plusColor = colors.debtAndProfit.text[5];

class CurveSetting extends PureComponent {
  constructor() {
    super();
    this.state = {
      curveSettings: [],
    };
  }
  componentDidMount() {
    this.setState({ curveSettings: this.props.defaultCurveSettings });
  }

  handleAdd = () => {
    // this.props
    this.setState({ curveSettings: this.state.curveSettings.concat([{ name: '', value: 1.0 }]) }, () => {
      if (this.state.ref) {
        const scrollHeight = this.state.ref.scrollHeight; //里面div的实际高度  2000px
        const height = this.state.ref.clientHeight; //网页可见高度  200px
        const maxScrollTop = scrollHeight - height;
        this.state.ref.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
        //如果实际高度大于可见高度，说明是有滚动条的，则直接把网页被卷去的高度设置为两个div的高度差，实际效果就是滚动到底部了。
      }
    });
  };

  onDelete = (ind) => {
    if (this.state.curveSettings?.length > 1) {
      this.setState({ curveSettings: this.state.curveSettings.filter((x, index) => index != ind) });
    } else {
      message.warning('至少要有一条数据');
    }
  };
  onChange = (e, ind) => {
    this.setState({ curveSettings: this.state.curveSettings.map((x, index) => (index == ind ? e : x)) });
  };

  onOk = () => {
    const { onOk } = this.props;
    const { curveSettings = [] } = this.state;
    let t = false;

    curveSettings?.map((x) => {
      if (!x.name || !x.value) {
        t = true;
      }
    });
    if (t) {
      message.warning('不能有空数据');
      return;
    }
    if (new Set(curveSettings.map((x) => x.name)).size != curveSettings.length) {
      message.warning('不能有重复期限');
      return;
    }
    onOk(curveSettings);
  };

  render() {
    const { visible, onCancel, onOk, defaultCurveSettings } = this.props;
    const { curveSettings } = this.state;

    return (
      <ModalC
        title='曲线设置'
        visible={visible}
        width={440}
        height={300}
        onCancel={() => {
          this.setState({ cucurveSettings: defaultCurveSettings }), onCancel();
        }}
        destroyOnClose={true}
        onOk={() => this.onOk()}
      >
        <div style={{ display: 'flex', height: '300px', flexDirection: 'column' }}>
          <p>
            关键期限及收益率变动幅度(bp)
            <Tooltip title='关键期限单位Y表示年，M表示月，W表示周'>
              <QuestionCircleOutlined style={{ marginLeft: '10px' }} />
            </Tooltip>
            ：{' '}
          </p>
          <div
            ref={(el) => {
              this.state.ref = el;
            }}
            style={{ flex: '1', overflowY: 'auto' }}
          >
            {curveSettings?.map((x, index) => (
              <InputGroup key={index} value={x} onChange={(e) => this.onChange(e, index)} onDelete={() => this.onDelete(index)} />
            ))}
          </div>
          <div>
            <PlusCircleOutlined onClick={this.handleAdd} style={{ color: plusColor }} />
          </div>
        </div>
      </ModalC>
    );
  }
}
export default CurveSetting;
